<template>

  <Navi class="h"></Navi>
  <!-- 占位 -->
  <div style="height: 60px;"/>
  <div class="demo">
    <p><span>4</span><span>0</span><span>4</span></p>
    <p>该页面不存在(´･ω･`)</p>
  </div>

</template>

<script>
import Navi from "@/components/navi";
export default {
  name: "NotFound",
  components: {Navi}
}
</script>

<style>

body {
  background-color: #ECECEC;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #3c3c3c;
}
.demo {
  cursor: default;
  user-select: none;
  width:600px;
  margin:10% auto;
}

.demo p:first-child {
  text-align: center;
  font-family: cursive;
  font-size: 150px;
  font-weight: bold;
  line-height: 100px;
  letter-spacing: 5px;
  color: #fff;
}

.demo p:first-child span {
  text-shadow: 0 0 2px #686868,
  0 1px 1px #ddd,
  0 2px 1px #d6d6d6,
  0 3px 1px #ccc,
  0 4px 1px #c5c5c5,
  0 5px 1px #c1c1c1,
  0 6px 1px #bbb,
  0 7px 1px #777,
  0 8px 3px rgba(100, 100, 100, 0.4),
  0 9px 5px rgba(100, 100, 100, 0.1),
  0 10px 7px rgba(100, 100, 100, 0.15),
  0 11px 9px rgba(100, 100, 100, 0.2),
  0 12px 11px rgba(100, 100, 100, 0.25),
  0 13px 15px rgba(100, 100, 100, 0.3);
  -webkit-transition: all .1s linear;
  transition: all .1s linear;
}

/*.demo p:first-child span:hover {*/
/*  text-shadow: 0 0 2px #686868,*/
/*  0 1px 1px #fff,*/
/*  0 2px 1px #fff,*/
/*  0 3px 1px #fff,*/
/*  0 4px 1px #fff,*/
/*  0 5px 1px #fff,*/
/*  0 6px 1px #fff,*/
/*  0 7px 1px #777,*/
/*  0 8px 3px #fff,*/
/*  0 9px 5px #fff,*/
/*  0 10px 7px #fff,*/
/*  0 11px 9px #fff,*/
/*  0 12px 11px #fff,*/
/*  0 13px 15px #fff;*/
/*  -webkit-transition: all .1s linear;*/
/*  transition: all .1s linear;*/
/*}*/

.demo p:not(:first-child) {
  text-align: center;
  color: #666;
  font-family: cursive;
  font-size: 20px;
  text-shadow: 0 1px 0 #fff;
  letter-spacing: 1px;
  line-height: 2em;
  margin-top: 20px;
}

.h {
  position: fixed;
  top: 0;
  z-index: 1;
}

</style>